Animal Crossing Fan Wiki
Bianca Reynoso / GIT418 Final
Project Type
Website
Requirements
Create a fixed 1280px website using HTML, CSS, JavaScript
Create an image slideshow/carousel, use AJX/API, create an element with web storage, and use a jQuery widget/plugin
I chose to make my website about the Animal Crossing series. I find filling websites with content I enjoy make it much easier when adding placeholder text. I added some elements from the Animal Crossing series as well. Throughout the website there are Animal Crossing characters and the background is the dirt pattern that is iconic to the game with its geometric style.
Goals
My goal of this website was to focus on JavaScript since that is what I struggle with the most. The website is still pleasing to look at with the pastel colors, but all my time went towards coding the JS elements.
Purpose
The purpose of this website is for people interested to learn more about Animal Crossing. It has a small about section talking about the series while an autoplaying slideshow is on the side showing the box art for most of the main games. Below it talks about the weather (although I did lie about the weather being linked to your local weather. I just needed an excuse to use the weather API sorry!). It ends with intros about my favorite villagers and a list to keep track of the games you have tried.
Tools
I had to go to the OFFICIAL Animal Crossing wiki many times to find text to place on the website. It was also where I saved the images of the box art for the slideshow. When coding my JavaScript, i also referenced a lot of work from lectures. I coded it myself but went along with the videos to understand what I was doing.
Steps
I started this project by creating a wireframe on paper. My website is very different from the mockup I created though. My mockup is focused more on the design of the website. This was created before I realized how complex coding the JavaScript would be. Although it does not follow the design of my wireframe, I still find the website aesthetically pleasing. It is simple but gets the job done!
Wireframe for one-page website
Conclusion
In the end, i am happy with the website I created. Design was not my main focus but I am still proud of what I accomplished. Creating a website about a series I love definitely made this project fun for me as well.
The most challenging parts of this project was the web storage list. I referenced the check box list seen in a lecture but it was very complicated. I even found styling it to be a bit difficult.
I feel like I have a better understanding of JavaScript from working on this final though. Rewatching lectures and looking at old CodePens helped me understand the process and reasoning behind JavaScript and the code we worked on as a class.
